<!-- uri (文章别名) 访问页面 -->
<template>
    当前页面的 uri 为 【{{ uri }}】
    <img src="/static/1.jpg" width="200"></img>
    <div style="text-align: center">
        <h2>内容展示区</h2>
        <!-- 需要先判断date是否为 null, 客户端跳转时 data 是没有默认值的   -->
        <div>id: {{ data?.id }}</div>
        <div>name: {{ data?.name }}</div>
    </div>
</template>

<script setup lang="ts">
/**
 * 模拟文章数据
 */
const dataMap = {
    "a1": {id: 1, name: "我是文章a1"},
    "a2": {id: 2, name: "我是文章a2"},
    "a3": {id: 3, name: "我是文章a3"},
    "a4": {id: 4, name: "我是文章a4"},
    "a5": {id: 5, name: "我是文章a5"},
    "a6": {id: 6, name: "我是文章a6"},
    "a7": {id: 7, name: "我是文章a7"},
    "a8": {id: 8, name: "我是文章a8"},
    "a9": {id: 9, name: "我是文章a9"},
    "a10": {id: 10, name: "我是文章a10"},
}
/**
 * 路由数据 -> uri
 */
const uri = ref("")
const route = useRoute();
uri.value = route.params.uri;
/**
 * 当前页面内容数据
 */
const data = ref({id: "", name: ""})

/**
 * 判断 uri 是否是 .html 访问, 不是直接响应 404
 * 实际会跳到 error.vue 错误页, statusCode 为浏览请求返回的 status 状态
 */
const isUri = (uri) => {
    if (!uri.includes(".html")) {
        throw createError({statusCode: 404, message: "找不到页面"})
    }
}
/**
 * 判断数据是否存在
 * 如通过 id 从后台查询数据, 如果没有数据或返回404, 直接跳错误页
 * @param uri
 */
const getDataByUri = (uri) => {
    const id = uri.replace(".html", "");
    let res = dataMap[id];
    if (res == null) {
        throw createError({statusCode: 404, message: "找不到页面数据", fatal: true})
    }
    return res;
}

// 判断 uri 是否符合规范
isUri(uri.value);

// 获取页面数据进行渲染
data.value = getDataByUri(uri.value);

</script>

<style scoped>

</style>